<!-- 选项面板-component -->
<template>
  <div v-if="isOpen">
    <div
      v-if="optionGroups.length"
      :style="{ left: `${x}px`, top: `${y}px` }"
      class="fixed top-12 z-20 w-60 overflow-hidden rounded-xl bg-white shadow-xl dark:bg-dark-foreground right-0"
    >
      <OptionGroup
        v-for="(group, index) in optionGroups"
        :key="index"
        :options="group.options"
        :title="group.title"
        @close="emit('close')"
      />
    </div>
    <div
      v-if="options.length"
      :style="{ left: `${x}px`, top: `${y}px` }"
      class="fixed z-20 w-60 select-none overflow-hidden rounded-xl bg-white shadow-lg dark:bg-2x-dark-foreground"
    >
      <Option
        v-for="(option, index) in options"
        :key="index"
        :option="option"
        @close="emit('close')"
      />
    </div>
    <div
      class="fixed top-0 left-0 right-0 bottom-0 z-10 cursor-pointer"
      @click.prevent="emit('close')"
      @contextmenu.prevent="emit('close')"
    ></div>
  </div>
</template>

<script setup>
const props = defineProps({
  isOpen: {
    type: Boolean,
    default: false
  },
  optionGroups: {
    type: Array,
    default: () => []
  },
  options: {
    type: Array,
    default: () => []
  },
  x: {
    type: Number,
    default: 0
  },
  y: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(['close'])
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
